<template>
	<div class="box" v-loading="loading" element-loading-text="加载中" element-loading-background="rgba(0, 0, 0, 0.8)">
		<CommonModule name="年合格率">
			<template v-slot:header>
				<el-date-picker v-model="year" value-format="yyyy" format="yyyy年" size="mini" type="year" placeholder="选择年" style="width: 10rem" :clearable="false"></el-date-picker>
			</template>
			<template v-slot:footer>
				<div class="data-board" id="passRate"></div>
			</template>
		</CommonModule>
	</div>
</template>

<script>
import CommonModule from "./CommonModule.vue"
import { getPassRateData } from "@/api/home.js"
import { mixinYear } from "./mixin.js"

export default {
	components: { CommonModule },
	mixins: [mixinYear],
	data() {
		return {
			loading: false,
			passRate: null,
			objResizeObserver: null
		}
	},
	beforeDestroy() {
		this.objResizeObserver.disconnect()
	},
	methods: {
		async getData() {
			try {
				this.loading = true
				let res = await getPassRateData({
					year: this.year
				})
				// console.log(res)
				res.data.forEach(item => {
					let total = item.qualifiedQuantity + item.unqualifiedQuantity
					let proportion = total > 0 ? item.qualifiedQuantity / total : 0
					item.acceptability = proportion > 0 ? proportion * 100 : 0
				})
				this.$nextTick(() => {
					this.drawBarChart(res.data)
				})
				this.loading = false
			} catch (error) {
				this.loading = false
				console.error("获取年合格率数据错误", error)
				this.$modal.msgError("获取年合格率数据错误")
			}
		},
		drawBarChart(data) {
			if (this.passRate) {
				this.passRate.dispose()
			}
			this.passRate = this.$echarts.init(document.getElementById("passRate"))
			let option = {
				tooltip: {
					trigger: "axis",
					axisPointer: {
						type: "shadow"
					},
					backgroundColor: "rgba(2, 135, 147, 0.6)",
					textStyle: {
						color: "#fff"
					},
					formatter(params) {
						let total = params[0].value + params[1].value
						let proportion = total > 0 ? params[0].value / total : 0
						let getProportion = proportion > 0 ? proportion * 100 : 0
						return params[0].name + "月" + "\n" + params[0].seriesName + "：" + params[0].value + "\n" + params[1].seriesName + "：" + params[1].value + "\n" + "合格率：" + getProportion + "%"
					}
				},
				legend: {
					icon: "circle",
					right: "0%",
					top: "0%",
					show: true,
					itemWidth: 10,
					itemHeight: 10,
					itemGap: 28,
					textStyle: {
						color: "#fff",
						fontSize: 12
					}
				},
				grid: {
					top: "16%",
					left: "3%",
					right: "3%",
					bottom: "3%",
					containLabel: true
				},
				xAxis: {
					type: "category",
					data: data.map(item => item.month),
					axisLine: {
						show: false
					},
					axisLabel: {
						margin: 10,
						color: "#fff",
						fontSize: 12,
						interval: 0,
						formatter: "{value}月"
					},
					axisTick: {
						show: false
					}
				},
				yAxis: {
					type: "value",
					axisLabel: {
						formatter: "{value}",
						color: "#fff",
						fontSize: 12
					},
					axisTick: {
						show: false
					},
					axisLine: {
						show: false
					},
					splitLine: {
						show: true,
						lineStyle: {
							color: "rgba(255, 255, 255, 0.2)",
							type: "solid",
							dashOffset: 0
						}
					},
					nameTextStyle: {
						align: "center",
						padding: [10, -10, 0, -50],
						color: "#6ed9ff"
					}
				},
				series: [
					{
						name: "合格",
						data: data.map(item => item.qualifiedQuantity),
						type: "bar",
						barWidth: 14,
						itemStyle: {
							color: "#71e4d5",
							borderRadius: 10
						}
					},
					{
						name: "不合格",
						data: data.map(item => item.unqualifiedQuantity),
						type: "bar",
						barWidth: 14,
						itemStyle: {
							color: "#d8a700",
							borderRadius: 10
						}
					}
				]
			}

			this.passRate.setOption(option)
			this.objResizeObserver = new ResizeObserver(() => {
				if (this.passRate) {
					this.passRate.resize()
				}
			})
			this.objResizeObserver.observe(document.getElementById("passRate"))
		}
	}
}
</script>

<style lang="scss" scoped>
.box {
	height: 32%;
	width: 100%;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	border-radius: 1rem;
	padding: 0.5rem 1.25rem;
	background-color: #108c98;
	flex-shrink: 0;
}

.data-board {
	width: 100%;
	height: 100%;
	overflow: hidden;
}
</style>
